<template>
  <div class="order-management app-container">
    <!-- 搜索表单 -->
    <el-card class="search-card filter-container">
      <div class="filter-header">
        <div class="filter-title">搜索条件</div>
        <div class="filter-actions">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>
      
      <common-form
        ref="searchFormRef"
        v-model="searchFormData"
        :form-fields="searchFormFields"
        label-width="80px"
        :gutter="20"
        class="filter-form"
      />
    </el-card>
    
    <!-- 表格操作栏 -->
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <div class="table-title">订单列表</div>
        </div>
      </template>
      
      <!-- 订单列表表格 -->
      <common-table
        :table-data="tableData"
        :table-columns="tableColumns"
        show-selection
        show-index
        :show-pagination="true"
        :pagination="pagination"
        @selection-change="handleSelectionChange"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template #status="{ row }">
          <el-tag :type="getOrderStatusType(row.status)">
            {{ getOrderStatusText(row.status) }}
          </el-tag>
        </template>
        
        <template #price="{ row }">
          ¥{{ row.totalAmount }}
        </template>
        
        <template #actions="{ row }">
          <el-button size="small" type="primary" link @click="handleView(row)">查看</el-button>
          <el-button 
            v-if="row.status === 1" 
            size="small" 
            type="success" 
            link 
            @click="handleConfirm(row)"
          >
            确认
          </el-button>
          <el-button 
            v-if="row.status === 2" 
            size="small" 
            type="warning" 
            link 
            @click="handleShip(row)"
          >
            发货
          </el-button>
        </template>
      </common-table>
    </el-card>
    
    <!-- 订单详情弹窗 -->
    <common-dialog
      v-model="detailDialogVisible"
      title="订单详情"
      @cancel="detailDialogVisible = false"
      :show-confirm="false"
      width="600px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="订单编号">{{ currentOrder.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ currentOrder.productName }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{ currentOrder.userName }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ currentOrder.quantity }}</el-descriptions-item>
        <el-descriptions-item label="总价">¥{{ currentOrder.totalAmount }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getOrderStatusType(currentOrder.status)">
            {{ getOrderStatusText(currentOrder.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ currentOrder.createTime }}</el-descriptions-item>
      </el-descriptions>
    </common-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import CommonForm from '@/components/CommonForm.vue'
import CommonTable from '@/components/CommonTable.vue'
import CommonDialog from '@/components/CommonDialog.vue'
import dayjs from 'dayjs'

// 搜索表单引用
const searchFormRef = ref()

// 搜索表单数据
const searchFormData = reactive({
  orderNo: '',
  status: ''
})

// 搜索表单字段配置
const searchFormFields = [
  {
    prop: 'orderNo',
    label: '订单编号',
    type: 'input',
    col: { xs: 24, sm: 12, md: 8 }
  },
  {
    prop: 'status',
    label: '订单状态',
    type: 'select',
    options: [
      { label: '全部', value: '' },
      { label: '待付款', value: 1 },
      { label: '待确认', value: 2 },
      { label: '待发货', value: 3 },
      { label: '已发货', value: 4 },
      { label: '已完成', value: 5 }
    ],
    col: { xs: 24, sm: 12, md: 8 }
  }
]

// 表格数据
const tableData = ref([
  {
    id: 1,
    orderNo: 'ORD202306010001',
    productName: '三亚五日游',
    userName: '张三',
    quantity: 2,
    totalAmount: 5998,
    status: 1,
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: 2,
    orderNo: 'ORD202306010002',
    productName: '北京三日游',
    userName: '李四',
    quantity: 1,
    totalAmount: 1888,
    status: 3,
    createTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')
  },
  {
    id: 3,
    orderNo: 'ORD202306010003',
    productName: '云南大理丽江双飞六日游',
    userName: '王五',
    quantity: 3,
    totalAmount: 9897,
    status: 5,
    createTime: dayjs().subtract(2, 'day').format('YYYY-MM-DD HH:mm:ss')
  }
])

// 表格列配置
const tableColumns = [
  {
    prop: 'orderNo',
    label: '订单编号',
    width: 180
  },
  {
    prop: 'productName',
    label: '商品名称',
    minWidth: 150
  },
  {
    prop: 'userName',
    label: '用户',
    width: 100
  },
  {
    prop: 'quantity',
    label: '数量',
    width: 80
  },
  {
    prop: 'totalAmount',
    label: '总价',
    width: 100,
    render: 'price'
  },
  {
    prop: 'status',
    label: '状态',
    width: 100,
    render: 'status'
  },
  {
    prop: 'createTime',
    label: '下单时间',
    width: 180,
    formatter: (value) => {
      return value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  }
]

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 3,
  pageSizes: [10, 20, 50]
})

// 已选中的行
const selectedRows = ref([])

// 详情弹窗相关
const detailDialogVisible = ref(false)
const currentOrder = ref({})

// 搜索事件
const handleSearch = () => {
  ElMessage.success('执行搜索操作')
}

// 重置搜索条件
const handleReset = () => {
  searchFormRef.value.resetFields()
}

// 查看订单详情
const handleView = (row) => {
  currentOrder.value = row
  detailDialogVisible.value = true
}

// 确认订单
const handleConfirm = (row) => {
  ElMessageBox.confirm(`确认订单 ${row.orderNo} 吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('订单已确认')
    // 实际开发中这里会发送请求更新订单状态
  }).catch(() => {
    // 用户取消操作
  })
}

// 发货
const handleShip = (row) => {
  ElMessageBox.confirm(`确认发货订单 ${row.orderNo} 吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('订单已发货')
    // 实际开发中这里会发送请求更新订单状态
  }).catch(() => {
    // 用户取消操作
  })
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const statusMap = {
    1: '待付款',
    2: '待确认',
    3: '待发货',
    4: '已发货',
    5: '已完成'
  }
  return statusMap[status] || '未知状态'
}

// 获取订单状态类型
const getOrderStatusType = (status) => {
  const typeMap = {
    1: 'info',
    2: 'warning',
    3: 'primary',
    4: 'success',
    5: 'success'
  }
  return typeMap[status] || 'info'
}

// 表格选择事件
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 分页大小改变
const handleSizeChange = (val) => {
  pagination.pageSize = val
  ElMessage.info(`每页显示 ${val} 条`)
}

// 当前页改变
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  ElMessage.info(`当前第 ${val} 页`)
}
</script>

<style scoped>
.order-management {
  padding: 20px;
}

.app-container {
  background-color: #fff;
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.filter-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.filter-actions {
  display: flex;
  gap: 10px;
}

.table-card {
  margin-top: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.table-actions {
  display: flex;
  gap: 10px;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
}
</style>